<template>
  <div class="item">
    <div class="header">
      <p>图片数量：8张
        <el-dropdown trigger="click" class="dropdown">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <i class="el-icon-edit" />
              编辑相册
            </el-dropdown-item>
            <el-dropdown-item>
              <i class="el-icon-delete" />
              删除相册
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </p>
    </div>
    <div class="content">
      <router-link :to="`albummanage/${currentAlbum.id}`">
        <img :src="coverImage" alt="">
      </router-link>
    </div>
    <div class="footer">
      {{ currentAlbum.name }}
    </div>
  </div>
</template>

<script>
import * as api from '@/api/album'
export default {
  // props: ['current_album'] // 自定义属性currentAlbum接收当前相册对象
  props: {
    // currentAlbum: Object
    currentAlbum: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      coverImage: '',
      picture: { id: 0, albumId: 0, url: '', isCover: 1, description: '', width: 0, height: 0, sort: 0 }
    }
  },
  mounted() {
    // 获取相册封面
    api.getCover(this.currentAlbum.id).then(res => {
      console.log('获取相册封面：', res)
      this.cover = res.data
      if (!this.cover) {
        this.coverImage = 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'
        return
      }
      // 判断封面是否为网络图片
      const url = this.cover.url
      if (url.startsWith('http')) {
        this.coverImage = url
      } else {
        this.coverImage = process.env.VUE_APP_BASE_API + url.substring(1)
      }
    })
  }
}
</script>

<style scoped>
    .item {
        width: 200px;
        height:200px;
        border:1px solid #ccc;
        margin: 30px 0px 0px 30px;
        display: inline-block;
        background-color: #fff;
    }
    .item .header{
        border-bottom:
        1px solid #ccc;
        height: 30px;
        line-height: 30px;
        padding: 0px 8px;
        font-size:0.9em;
    }
    .item .content {
        text-align: center;
        height: 140px;
        border-bottom: 1px solid #ccc;
    }
    .item .content img{
        height: 140px;
    }
    .item .footer{
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 0.9em;
    }
    .item .header .dropdown{
        float: right;
    }
    .el-dropdown-link {
        cursor: pointer;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }

</style>
